<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>编辑地址</title>
    <link rel="stylesheet" href="../../js/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../css/mui-app-style.css">
    <link rel="stylesheet" href="../../js/mui-picker/mui.picker.css">
    <link rel="stylesheet" href="../../js/mui-picker/mui.poppicker.css">

</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
    <h1 class="mui-title">编辑地址</h1>
</header>
<div class="mui-content" id="address">
    <form class="mui-input-group">
        <div class="mui-input-row">
            <label>收货人</label>
            <input type="text" placeholder="请输入收货人姓名">
        </div>
        <div class="mui-input-row">
            <label>联系手机</label>
            <input type="text" class="mui-input-clear" placeholder="请输入联系方式">
        </div>
        <div class="mui-input-row " id="showCityPicker3">
            <div class="mui-navigate-right">
                <label>所在地区</label>
                <input type="text" id="cityResult3" class="mui-input-clear" placeholder="请选择所在区域">
            </div>
        </div>
    </form>
    <div class="mui-input-row" style="margin: 10px 5px;">
        <textarea id="textarea" rows="5" placeholder="详细地址"></textarea>
    </div>

    <div class="mui-button-fixed">
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block">提交</button>
    </div>

    <!--<button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button>-->
    <!--<div id='cityResult3' class="ui-alert"></div>-->

</div>
<script src="../../js/mui/js/mui.min.js"></script>
<script src="../../js/mui-picker/mui.picker.js"></script>
<script src="../../js/mui-picker/mui.poppicker.js"></script>
<script src="../../js/mui-picker/city.data-3.js"></script>
<script src="../../js/common/crypto-js.js"></script>
<script src="../../js/common/common.js"></script>
<script>
    (function($, doc) {
        $.init();
        $.ready(function() {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            //-----------------------------------------
           //级联示例
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var showCityPickerButton = doc.getElementById('showCityPicker3');
            var cityResult3 = doc.getElementById('cityResult3');
            showCityPickerButton.addEventListener('tap', function(event) {
                cityPicker3.show(function(items) {
                    // cityResult3.innerText = "你选择的城市是:" + _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
                    cityResult3.value = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
        });
    })(mui, document);
</script>
<script>
</script>
</body>
</html>